<template>
  <div class="view">
    <div class="top-tip">
      <div class="text" @click="goDepositList()">押金明细</div>
    </div>
    <div style="text-align: center">
      <h1>{{cashNum}}<span style="font-size: 42rpx;font-weight: normal">元</span></h1>
    </div>
    <div style="text-align: center">
      <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_wallet.png" class="img3"/>
    </div>
    <div style="text-align: center;font-size: 26rpx;color: #999;" v-if="depositStatus == '4'">
      <!--<img :src="depositStatusPicture" class="img4" mode="widthFix">-->
      <!--<wxParse v-if="descrptionRM" :content="descrptionRM"></wxParse>-->
      <div style="color: #26C319;font-weight: bold">免押金卡生效中</div>
      <div>退回车辆后仍可使用车辆哦</div>
    </div>
    <button class="btn pass fix btn1" @click="showDialog = true">退回押金</button>
    <div class="dialog" v-if="showDialog">
      <div class="dialog_main">
        <div class="tips" v-if="depositStatus == '2'">
          <wxParse :content="refundAlertText"></wxParse>
        </div>
        <div class="tips" v-else>
          确定退回押金吗？
        </div>
        <div class="dialog_footer foot">
          <button class="rightbtn" @click="refund">确认</button>
          <button class="leftbtn" @click="showDialog = false">再想想</button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import wxParse from 'mpvue-wxparse'
  import Service from '@/utils/service'

  export default {
    components: {
      wxParse
    },
    data () {
      return {
        showDialog: false,
        cashNum:null,
        refundAlertText: '',
        depositStatus: ''
      }
    },
    onLoad(options) {
      this.cashNum = options.depositAmount
      this.depositStatus = options.depositStatus
      if (options.refundAlertText) {
        this.refundAlertText = options.refundAlertText.replace(/\n/g,"<br/>")
      }
      this.depositStatus = options.depositStatus

    },
    methods: {
      goDepositList() {
        wx.navigateTo({
          url: "/pages/cashList/main"
        })
      },
      refund() {
        let data = {
          returnDepositType: '1'
        }
        Service.refund(data).then((res) => {
          if (res.code == 200) {
            this.showDialog = false
            let refundInfo = JSON.stringify(res.data)
            wx.redirectTo({
              url: `../returning/main?refundInfo=${refundInfo}`
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .view{
    padding: 0 50px 50px 50px;
    text-align: center;
  }
  .top-tip {
    padding-top: 30px;
    padding-bottom: 90px;
    overflow: hidden;
  }

  .top-tip .text {
    float: right;
    font-size: 30px;
    color: #666;
  }
  .img3{
    width: 310px;
    height: 190px;
    margin-top: 125rpx;
    margin-bottom: 178rpx;
  }
  .img4{
    width: 313px;
  }
  .tips{
    width:80%;
    margin: 0 auto;
  }
  h1{
    line-height: 100rpx;
    font-size: 72rpx;
    margin-bottom: 0;
  }
  .btn{
    background: #fff;
    border: 2px solid #ddd;
    color: #666;
  }
  .foot{
    position: absolute;
    left:0;
    bottom: 30px;
    width: 100%;
  }
  .btn1{
    border-radius: 10px;
  }
</style>
